<template>
    <van-sticky>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <van-empty description="暂无数据" v-if="cartList.length===0"/>

    <div>
        <div v-for="(item, index) in cartList">
            <div>
                <van-checkbox v-model="item.check" @click="intery"></van-checkbox>

            </div>

            <div>
                <van-card :num="item.num" :price="item.goods_price" :title="item.goods_name"
                    :thumb="item.goods_small_logo">

                    <template #footer>
                        <van-button @click="delCart(item, index)" size="mini">-</van-button>
                        <van-button @click="addCart(item)" size="mini">+</van-button>
                    </template>
                </van-card>

            </div>

            <van-submit-bar :price="allPrice" :button-text="`结算${allCount}`" @submit="onSubmit" class="xia">
                <van-checkbox v-model="allCheck" @click="allCheckFn">全选</van-checkbox>
            </van-submit-bar>

        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import _ from 'lodash'
const onClickLeft = () => history.back();
import { useCartStore } from '../../store';
import { storeToRefs } from 'pinia';
const { ADD_CART_ITEM, DEL_CART_ITEM, ALL_CHECK } = useCartStore();
const { allPrice, allCount, cartList } = storeToRefs(useCartStore());
import { showConfirmDialog, showToast } from 'vant';

const addCart=_. debounce(item=>{
    ADD_CART_ITEM(item)
},100)

const delCart=_.debounce((item,index)=>{
    if(item.num==1){
        showConfirmDialog({
            title:'删除',
            message:(`确定要删除${item.goods_name}吗？`)
        }).then(res=>{
            DEL_CART_ITEM(index)
        }).catch(res=>{
            showToast('取消删除')
        })
    }else{
        DEL_CART_ITEM(item)
    }
},100)

const intery=()=>{
    allCheck.value=cartList.value.every(item=>item.check)
}
const allCheck=ref(true);
intery();

const allCheckFn=()=>{
    ALL_CHECK(allCheck.value)
}
</script>

<style lang="scss" scoped>
.xia {
    margin-bottom: 50px;
}
</style>